<template>
    <div class="config-manage">
        <div class="add-params">
            <el-button type="primary" @click="showModal()" v-permission="'sys:config:add'">添加</el-button>
        </div>
        <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="(item, index) in dictList" :key="index" :title="item.dictTypeName" :name="item.dictType" :collapse-transition="false">
                <el-table :data="item.tableData" height="250">
                    <el-table-column v-for="item in tableHeader" :prop="item.prop" :label="item.label"/>
                    <el-table-column  label="操作" min-width="100">
                        <template #default="{ row }">
                            <el-button
                                type="primary"
                                link
                                @click="showModal(row)"
                                v-permission="'sys:config:edit'"
                                v-if="row.role_code !== globalProperties.superAdminRole"
                                >编辑</el-button
                            >
                            <el-popconfirm
                                title="确定删除吗?"
                                @confirm="deleteHandle(row.dictType, row.dictId)"
                                v-if="row.role_code !== globalProperties.superAdminRole"
                            >
                                <template #reference>
                                    <el-button link type="primary" v-permission="'sys:config:delete'"
                                        >删除</el-button
                                    >
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
            </el-collapse-item>
        </el-collapse>
        <!-- 新增参数弹窗 -->
        <config-modal
        ref="configModalRef"
        @handle-change="handleChange"
        @get-dict-types="getDictTypes"
        :activeNames="activeNames"
        ></config-modal>
    </div>
  </template>
  
  <script setup lang="ts">
    import { getAllDictType, getDictsByType, deleteDict } from '@/api/dict'
    import useGetGlobalProperties from '@/utils/global'
    import configModal from './configModal.vue'
    const globalProperties = useGetGlobalProperties()

    const activeNames = ref([])
    const dictList = reactive([
        { dictType: '', dictTypeName: '', tableData: reactive([
            {
                dictId: '',
                dictName: '',
                sortNo: '',
                isUsed: '',
                createBy: '',
                createTime: '',
                updateBy: '',
                updateTime: '',
            }
        ])},
    ])

    const tableHeader = reactive([
        {
            'prop': 'dictId',
            'label': '代码'
        },
        {
            'prop': 'dictName',
            'label': '码值'
        },
        {
            'prop': 'sortNo',
            'label': '排序号'
        },
        {
            'prop': 'isUsed',
            'label': '是否正在使用'
        },
        {
            'prop': 'createBy',
            'label': '创建人'
        },
        {
            'prop': 'createTime',
            'label': '创建时间'
        },
        {
            'prop': 'updateBy',
            'label': '更新人'
        },
        {
            'prop': 'updateTime',
            'label': '更新时间'
        },
    ])

    // 获取字典类型
    getDictTypes()
    function getDictTypes(){
        getAllDictType().then((res: any) => {
            if(res?.flag === true){
                Object.assign(dictList, res.data)
            }else{
                ElNotification.error(res.message)
            }
        }).catch((err: any) => {
                ElNotification.error(err)
        })
    }

    const handleChange = (val: any) => {
        const count = ref(1)
        dictList.forEach(async dict => {
            if(val[val.length - 1] === dict.dictType && count.value <= activeNames.value.length){
                await getDictsByType({ dictType: val[val.length - 1] }).then((res: any) => {
                    if(res?.flag === true){
                        dict.tableData = res.data
                        // 如果该码表类型下的码值为空
                        if(res.data.length === 0){
                            getDictTypes()
                        }
                        count.value = activeNames.value.length // 记录上一个activeNames
                    }else{
                        ElNotification.error(res.message)
                    }
                }).catch((err: any) => {
                    ElNotification.error(err)
                })
            }
        });
    }

    // 展示新增、编辑弹窗
    const configModalRef = ref()
    const showModal = (row?: Object) => {
        configModalRef.value.showModal(row)
    }

    // 删除
    const deleteHandle = async (dictType: string, dictId: string) => {
        try {
            const res = await deleteDict({ dictType: dictType, dictId: dictId });
            if (res?.flag === true) {
                ElNotification.success('删除成功');
            } else {
                ElNotification.error(res.message);
            }
        } catch (err: any) {
            ElNotification.error(err)
        }
        // 等待 deleteDict 和 handleChange 完成后再执行后续操作
        handleChange(activeNames.value)
    }

  </script>
  <style scoped>
    .add-params {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 10px;
    }
  </style>
  